{% extends 'base/base.html' %}

{% block title %}
    {{ file.title }}
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h1>{{ file.title }}</h1>
                    <div class="mt-2">
                        <small class="text-muted">
                            <strong>作者:</strong> {{ file.author.username }} |
                            <strong>发布时间:</strong> {{ file.create_time|date:"Y-m-d H:i" }} |
                            <strong>状态:</strong>
                            <span class="badge 
                                {% if file.state == 'success' %}bg-success
                                {% elif file.state == 'fail' %}bg-danger
                                {% else %}bg-warning{% endif %}">
                                {{ file.get_state_display }}
                            </span>
                        </small>
                    </div>
                    <div class="mt-1">
                        <strong>标签:</strong>
                        {% for tag in file.tags.all %}
                            <span class="badge bg-secondary">{{ tag.title }}</span>
                        {% endfor %}
                    </div>
                </div>
                <div class="card-body">
                    <div class="file-content">
                        {{ file.content|safe }}
                    </div>
                </div>
                <div class="card-footer">
                    <a href="{% url 'main:files_by_tag' file.tags.first.id %}" class="btn btn-secondary">
                        返回文件列表
                    </a>
                    <a href="{% url 'main:index' %}" class="btn btn-primary">返回首页</a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.file-content {
    line-height: 1.6;
    font-size: 16px;
}

.file-content img {
    max-width: 100%;
    height: auto;
}
</style>
{% endblock %}